<template>
  <div style="height: 100%;overflow: auto;margin-bottom: 20px;">
    <el-row class="nav">
      <i class="el-icon-arrow-left"
         @click="goBack"></i>
      <span class="font-weight">新建通知模板</span>
    </el-row>
    <el-divider style="margin-bottom:10px;"></el-divider>
    <el-form ref="template"
             :model="template"
             :label-position="left"
             :label-width="labelWidth"
             style="width: 500px;margin:0 auto;">
      <!-- 模板名称 -->
      <el-form-item label="">
        <p class="title-txt"></p>
        <el-row>
          <span>模板名称:&nbsp;&nbsp;</span>
          <el-input v-model="template.name"></el-input>
        </el-row>
      </el-form-item>
      <!-- 描述 -->
      <el-form-item>
        <el-row>
          <span>描述:&nbsp;&nbsp;</span>
          <el-input v-model="template.discription"></el-input>
        </el-row>
      </el-form-item>
      <!-- 模板类型 -->
      <el-form-item>
        <span style="float:left;">模板类型:&nbsp;&nbsp;</span>
        <el-select v-model="typeOptionsModel"
                   @change="reminderTime(item)"
                   size="mini"
                   clearable
                   placeholder="请选择模板类型" value="">
          <el-option v-for="item in typeOptions"
                     :key="item.tenantId"
                     :label="item.dictName"
                     :value="item.dictCode">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 模板内容 -->
      <el-form-item>
        <span>模板内容:&nbsp;&nbsp;</span>
          <quill-editor ref="text" v-model="template.content" class="myQuillEditor" :options="editorOption" />

      </el-form-item>

      <!-- 标题 -->
      <el-form-item>
        <el-row>
          <span>标题:&nbsp;&nbsp;</span>
          <el-input v-model="template.title"></el-input>
        </el-row>
      </el-form-item>

      <!-- 附件 -->
      <el-form-item>
        <el-row>
          <span>附件:&nbsp;&nbsp;</span>
          <el-upload
            class="upload-demo"
            :action="uploadST()"
            :on-change="handleChange"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :auto-upload="false">
            <el-button v-model="template.attachmentAddress" size="small" type="primary">点击上传</el-button>
          </el-upload>
          <!--<el-upload-->
            <!--class="upload-demo"-->
            <!--action="https://jsonplaceholder.typicode.com/posts/"-->
            <!--:on-change="handleChange"-->
            <!--:file-list="fileList">-->
            <!--<el-button size="small" type="primary">点击上传</el-button>-->
            <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
          <!--</el-upload>-->

        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button type="button"
                   class="el-button el-button--primary el-button--medium h30Btn"
                   @click="Submit()">完成</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {
    getNoticeTemp,
    newAddMsgTemp,
    deleteListMsg,
    startClose,
    getListNotice,
    getInsertNotice,
    getInsertNoticeById,
    getUploadFile
  } from '@/api/setNotice'
  import common from '@/common/common.js'
  import { quillEditor } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  export default {
    data () {
      return {
        form:{
          detailsCheckList:''
        },
        checked: '',
        detailViewList: [],
        nonSysDictParamList: [],
        timeOptions: [],
        typeOptions: [],
        typeOptionsModel: [],
        Options: [],
        item: '邮件',
        template: {
          name: '',
          discription: '',
          content: '',
          title: '',
        },
        newSetNoticeDate:[],
        editorOption: {},
        fileList:[],
        file:[]
      }
    },
    components: {
      quillEditor
    },
    mounted () {
      // 用唯一标识搜索模板
      this.getNoticeTemp()
      if(this.$store.state.newNoticeId){
        this.searchTmp()
      }
    },
    methods: {
      search () {
      },
      create () {
      },
      uploadST(){
        const formData = new FormData()
        formData.append('file', this.fileList);
        let tenantId = sessionStorage.getItem('tenantId') || 'default'
        if(this.file){
          getUploadFile(formData,tenantId).then(res => { // 异步请求
            if (res.code === '200') {
              this.$message.success("上传成功");
              this.fileList = [];
              this.file = [];
            } else {
              this.fileList = [];
              this.file = [];
              this.$message.error(res.description || '上传失败')
            }
          }).catch((err) => {})
        }
        !this.file && (this.$message({
          type:'error',
          message:'请选择文件！'
        }));
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleChange (file, fileList) {
        this.file = file
        console.log(this.fileList);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`)
//        console.log(file)
      },
      reminderTime () {
        //  短信
        if (this.typeOptionsModel === 'msg') {
          this
            .$router
            .push('/newSetNoticeTemplate')
        }
        //  邮件
        else if (this.typeOptionsModel === 'email') {
          this
            .$router
            .push('/newSetNoticeTemplateEmail')
        }
        //  系统消息
        else if (this.typeOptionsModel === 'sys_msg') {
          this
            .$router
            .push('/newSetNoticeTemplateMessage')
        }
      },
      searchTmp () {
        let params = this.$store.state.newNoticeId
        getInsertNoticeById(params).then(res => {
          if (res.data.retCode === 200) {
            console.log(res.data + 'getinsertnoticebyid')
            this.template.name = res.data.data[0].name
            this.template.discription = res.data.data[0].discription
            this.template.content = res.data.data[0].content
            this.$message({ message: res.data.msg, type: 'success' })
          } else {
            this.$message({ message: res.data.msg, type: 'error' })
          }
        })
      },
      // 获取模板类型
      getNoticeTemp () {
        getNoticeTemp().then(res => {
          if (res.data.retCode === 200) {
            this.typeOptions = res.data.data
            console.log(res.data)
            this.$message({ message: res.data.msg, type: 'success' })
          } else {
            this.$message({ message: res.data.msg, type: 'error' })
          }
        })

      },
      Submit () {
        console.log(this.$refs.text.value)
//         新建
        let params = {
          name: this.template.name,
          templateType: this.typeOptionsModel,
          discription: this.template.discription,
          content: this.$refs.text.value,
          attachmentAddress: "附件地址",
          linkToWorkOrder: "Y"
        }
        console.log(this.typeOptions[0])
//        更新
        let updata = {
          name: this.template.name,
          id: this.$store.state.newNoticeId,
          templateType: this.typeOptionsModel,
          discription: this.template.discription,
          content: this.$refs.text.value,
          linkToWorkOrder: "Y"

        }
        if(this.$store.state.newWorkName){
          console.log(this.$store.state.newWorkName + '更新')
          // 更新模板
          getInsertNotice(updata).then(res => {
            if (res.data.retCode === 200) {

              this.$message({ message: res.data.msg, type: 'success' })
            } else {
              this.$message({ message: res.data.msg, type: 'error' })
            }
          })
        } else {
          // 新建模板
          newAddMsgTemp(params).then(res => {
            if (res.data.retCode === 200) {


              this.$message({ message: res.data.msg, type: 'success' })
            } else {
              this.$message({ message: res.data.msg, type: 'error' })
            }
          })
        }
      },
      goBack () {
        this.$router.push('/setNotice')
      }
    }
  }
</script>
<style scoped>
.title-txt {
  font-size: 12px;
  font-weight: bold;
  line-height: 25px;
}
</style>
